<template>
  <el-dialog v-model="visible" title="导出中心" width="950" draggable align-center :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
    <div class="flex py-4">
      <div class="left flex-1 mr-5">
        <div class="font-medium">字段列表</div>
        <div style="width: 432px">
          <el-table :data="export_field" height="600" style="width: 100%" highlight-current-row @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="field_name" label="字段" />
            <el-table-column prop="opearn" label="排序" width="120">
              <template #default="scope">
                <el-link type="primary" :underline="false" @click="moveUp(scope.$index, scope.row)"> 上移 </el-link>
                <el-divider direction="vertical" />
                <el-link type="primary" :underline="false" @click="moveDown(scope.$index, scope.row)"> 下移 </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right flex-1">
        <div class="font-medium">操作</div>
        <div class="flex justify-between items-end mb-4">
          <el-button type="primary" @click="handleImport">导出</el-button>
          <div class="flex text-xs text-gray-400 ml-5">
            <svg-icon icon-class="hint_line01"></svg-icon>导出结果在
            <el-link type="primary" :underline="false" @click="navPersonal"> 个人中心 </el-link>
            查看
          </div>
        </div>
        <div class="mb-2">
          <VGroup>
            <el-input v-model="exportName" class="w-full" placeholder="请输入名称" />
            <el-button type="primary" plain @click="saveTemplate"> 保存模版 </el-button>
          </VGroup>
        </div>
        <el-table :data="templates" style="width: 100%" highlight-current-row border>
          <el-table-column prop="name" label="名称" width="300" />
          <el-table-column prop="opearn" label="操作">
            <template #default="scope">
              <el-button type="primary" link @click="exportRow(scope.row)"> 导出 </el-button>
              <template v-if="scope.row.creator_id == user_id">
                <el-divider direction="vertical" />
                <el-button type="danger" link @click="exportDelete(scope.row)"> 删除 </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="DerivedCenter">
import { getExportConfig, exportRord, exporttpl, exportTemplateOne, exportTemplateDelete } from "./api"
import { ElMessage } from "element-plus"
import action from "@/utils/action.js"
import { config } from "@/config/export.js"
const { proxy } = getCurrentInstance()
const emits = defineEmits(["query"])
const props = defineProps({
  // options: {
  //   type: Object,
  //   required: true,
  // },
  callbackFn: {
    type: Function,
    default: null,
  },
})

const data = reactive({
  form: {
    title: "",
    module: config["module"],
    config_id: null,
    condition: null,
  },
  visible: false,
  loading: false,
  export_field: [],
  multipleSelection: [],
  exportName: "",
  templates: [],
  user_id: "",
  tag_name: "",
})
const { visible, export_field, multipleSelection, form, exportName, templates, user_id, tag_name } = toRefs(data)
const open = (item) => {
  visible.value = true
  form.value.condition = item.condition
  tag_name.value = item.tag_name
  getTemplate()
}
const getTemplate = async () => {
  try {
    const res = await exportTemplateOne({
      home_system: config["home_system"],
      tag_name: tag_name.value,
    })
    const { config_name } = res.data
    export_field.value = res.data.export_field || []
    templates.value = res.data.templates || []
    form.value.config_id = res.data.config_id
    form.value.title = config_name + window.userInfo.user.realname
  } catch (e) {
    throw Error(e)
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const moveUp = (index, row) => {
  if (index > 0) {
    const upDate = export_field.value[index - 1]
    export_field.value.splice(index - 1, 1)
    export_field.value.splice(index, 0, upDate)
  } else {
    ElMessage.error("已经是第一条，不可上移")
  }
}
// 下移
const moveDown = (index, row) => {
  if (index + 1 === export_field.value.length) {
    ElMessage.error("已经是最后一条，不可下移")
  } else {
    const downDate = export_field.value[index + 1]
    export_field.value.splice(index + 1, 1)
    export_field.value.splice(index, 0, downDate)
  }
}

const handleImport = async () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("至少勾选一条导出项")
    return
  }

  const fields = multipleSelection.value.map((i) => i.field_key)
  try {
    if (!!props.callbackFn) {
      props.callbackFn({ ...form.value, fields })
    } else {
      const res = await exportRord({ ...form.value, fields })
      ElMessage.success(res.message)
    }
  } catch (e) {
    throw Error(e)
  }
}

const navPersonal = async () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      path: "/user/profile",
      type: "push",
    },
  })
}

const saveTemplate = async () => {
  if (!exportName.value) {
    ElMessage.error("请输入名称")
    return
  }
  if (multipleSelection.value.length == 0) {
    ElMessage.error("至少勾选一条导出项")
    return
  }

  const fields = multipleSelection.value.map((i) => i.field_key)

  try {
    if (!!props.callbackFn) {
      props.callbackFn({ config_id: form.value.config_id, name: exportName.value, fields })
    } else {
      const res = await exporttpl({ config_id: form.value.config_id, name: exportName.value, fields })
      ElMessage.success(res.data.message)
      getTemplate()
    }
  } catch (e) {
    throw Error(e)
  }
}

const exportRow = async (row) => {
  const title = row.name + window.userInfo.user.realname
  try {
    const res = await exportRord({
      tpl_id: row.tpl_id,
      title,
      ...form.value,
      fields: [],
    })
    ElMessage.success(res.message)
  } catch (e) {
    throw Error(e)
  }
}

const exportDelete = async (row) => {
  try {
    const res = await exportTemplateDelete(row.tpl_id)
    ElMessage.success(res.data.message)
    getTemplate()
  } catch (e) {
    throw Error(e)
  }
}

onMounted(() => {
  user_id.value = window.userInfo?.user?.user_id
})

const close = () => {
  exportName.value = ""
  visible.value = false
}
defineExpose({ open })
</script>
